<template>
  <div>
    <el-dialog :close-on-click-modal="false"
               modal-append-to-body
               lock-scroll
               top="10%"
               :visible.sync="dialogVisible"
               width="30%"
               class="report_export"
               @close="cancel">
      <div class="report_export">
        <p>导出任务已创建，任务进度请查看 <span class="export_list" @click="cancel('export')">导出任务列表</span></p>
        <p class="down"><span>{{count}}s</span> 倒计时自动关闭会话框</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'report',
    data () {
      return {
        dialogVisible: false,
        count: 3
      }
    },
    props: {
      isDialogVisible: Boolean
    },
    methods: {
      cancel (str) {
        this.$emit('close', str)
      },
      countDown () {
        let timor = null
        let that = this
        timor = setInterval(() => {
          that.count--
          if (that.count === 0) {
            clearInterval(timor)
            this.cancel()
          }
        }, 1000)
      }
    },
    beforeMount () {
    },
    watch: {
      isDialogVisible (cur) {
        this.dialogVisible = cur
        if (cur) {
          this.count = 3
          this.countDown()
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .report_export
    padding 20px 0 40px
    p
      font-size 14px
      text-align center
      color $cf-gray0
      .export_list
        color $c-main
        cursor pointer
    p.down
      margin-top 36px
      span
        color $c-pink
</style>
